<template>
	<div class="ynet-example action-bar">
		<div class="default-doc-demo-container" v-for="(demo, index) in demos" :key="index">
			<div class="default-doc-demo-list">
				<div class="default-doc-demo">
					<div class="doc-demo-box-info"><h4 class="doc-demo-title">{{demo.title || ''}}</h4></div>
					<div class="doc-demo-box-preview">
						<component :is="demo"></component>
					</div>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	import demo0 from './case/demo0'
	import demo1 from './case/demo1'
	import createDemoModule from '../../create-demo-module'
	export default {
		...createDemoModule('check', [demo0, demo1])
	}
</script>
<style lang="scss">
	.default-doc-demo-container{
		margin-bottom: .2rem;
	}
	.default-doc-demo-list{
		padding: .2rem;
		.default-doc-demo{
			border: 1px solid #efefef;
			.doc-demo-box-info{
				background: #fff;
				border-bottom: solid 1px #efefef;
				padding: .3rem .2rem;
			}
			.doc-demo-box-preview{
				background: #f9fafb;
				padding: .15rem;
				.md-button{
					margin-bottom: .1rem;
				}
			}
		}
	}
</style>